@charset "UTF-8";

:root {
    --button-width: 500px;
    --button-height: 295px;
    --toggle-diameter: 255px;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 333px;
    --color-gray: #e9e9ea;
    --color-dark-grey: #39393d;
    --color-green: #30D158;
}





#ios-switch span {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-gray);
    border-radius: calc(var(--button-height) /2);
    position: relative;
    transition: all 0.3s ease-in-out;
}

#ios-switch span::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #fff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset)) ;
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--button-toggle-offset)*4) rgb(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

#ios-switch input[type="checkbox"] {
    display: none;
}

#ios-switch input[type="checkbox"]:checked + span {
    background-color: var(--color-green);
}

#ios-switch input[type="checkbox"]:checked + span::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--button-toggle-offset)*4) rgb(0, 0, 0, 0.1);
}

#ios-switch input[type="checkbox"]:active + span::after {
    width: var(--toggle-wider);
}

#ios-switch input[type="checkbox"]:checked:active + span::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
    }

    #ios-switch span {
        background-color: var(--color-dark-grey);
    }
}